<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<link rel="stylesheet" media="screen" href="css/docs.css" />
<link rel="stylesheet" media="screen" href="lib/jqplot/jquery.jqplot.min.css" />
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css" />

<script type="text/javascript" src="${ctx}/js/global_util.js"></script>

<h1 class="page-title">出差费用申报单 - 添加</h1>

<div class="container_12 clearfix leading">
    <div class="clear"></div>
    <h5>流水号：<strong id="administration_serial_number"> </strong> 申请时间：<strong id="d_date"></strong></h5>
    <div class="portlet leading">
        <header>
            <h6 style="margin-bottom:0px"><a href="#"><span style="background:url(${ctx}/images/img/script_link.png)" class="icon">&nbsp;</span>报告单 </a> </h6>
        </header>

        <section class="tabs side">
            <ul class="clearfix" style="width:150px" id="tab_title">
                <li style="width:150px" onclick="tab_onclick(this)" id="tab_li_first">
                    <a href="#"><span style="background:url(${ctx}/images/img/table_add.png)" class="icon">&nbsp;</span><span class="tab_title_span">第1项</span></a>
                </li>
            </ul>
            <section style="margin-left:150px">
                <table class="display" id="example" style="clear:none">
                    <thead>
                    </thead>
                    <tbody>
                    <tr class="gradeA">
                        <td>出差日期</td>
                        <td><strong> <input name="username3" type="text" style="width:100px" id="detail_evectionDate" onfocus="WdatePicker()" readonly="readonly"/>
                        </strong></td>
                        <td>出差事由</td>
                        <td><strong> <input name="username2" type="text" style="width:100px" id="detail_evectionReason"/> </strong></td>
                    </tr>
                    <tr class="gradeA">
                        <td>机/车票</td>
                        <td><strong> <input name="username3" type="text" style="width:150px" id="detail_planeCost" onblur="computeTotal()"/> </strong></td>
                        <td>交通费</td>
                        <td><strong> <input name="username2" type="text" style="width:150px" id="detail_trafficCost" onblur="computeTotal()"/> </strong></td>
                    </tr>
                    <tr class="gradeA">
                        <td>住宿费</td>
                        <td><strong> <input name="username3" type="text" style="width:150px" id="detail_stayCost" onblur="computeTotal()"/> </strong></td>
                        <td>膳食</td>
                        <td><strong> <input name="username2" type="text" style="width:150px" id="detail_mealCost" onblur="computeTotal()"/> </strong></td>
                    </tr>
                    <tr class="gradeA">
                        <td>其他费用</td>
                        <td><strong> <input name="username3" type="text" style="width:150px" id="detail_otherCost" onblur="computeTotal()"/> </strong></td>
                        <td>合计</td>
                        <td><strong> <input name="username2" type="text" style="width:150px" id="detail_amount" readonly="readonly"/> </strong></td>
                    </tr>
                    </tbody>
                </table>

                <section class="clearfix">
                    <div class="tabs side grid_12 leading">
                        <div class="clear"></div>
                        <div class="grid_12">
                            <div class="form-action clearfix">
                                <p>
                                    <a class="button" href="javascript:void(0)" onclick="addDetail()" style="display: none;" id="modify_btn"><span style="background:url(${ctx}/images/img/page_edit.png)" class="icon">&nbsp;</span>修改项目</a>
                                    <a class="button" href="javascript:void(0)" onclick="deleteDetail()" style="display: none;" id="delete_btn"><span style="background:url(${ctx}/images/img/cancel.png)" class="icon">&nbsp;</span>删除项目</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="clearfix"></section>
                <section class="clearfix"></section>
                <section class="clearfix"></section>
            </section>
            <div class="clear"></div>
            <div class="container_12 clearfix leading" style=" padding-left:20px">
                <div class="form-action clearfix" style="margin-left:115px">
                    <p id="add_detail_btn">
                        <a class="button" href="javascript:void(0)" onclick="addDetail()"><span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>添加项目</a></p>
                    <p><strong>合计：</strong> <input type="text" style="width:120px" id="total_money_input" name="username" readonly="readonly">
                    </p>
                </div>
            </div>
        </section>
    </div>
    <div class="clear"></div>
    <div class="tabs side grid_12 leading">
        <div class="clear"></div>
    </div>
</div>

<div class="clear"></div>
<div class="container_12 clearfix leading" style=" padding-left:20px">
    <div class="form-action clearfix">
        <p>
            <a class="button" href="javascript:void(0)" onclick="doAddDetails()"><span style="background:url(${ctx}/images/img/page_edit.png)" class="icon">&nbsp;</span>确定提交</a>
            <a class="button" href="#${userType==1?"sign" : "public"}/administration-evection-cost-apply-form.xhtml"><span style="background:url(${ctx}/images/img/arrow_undo.png)" class="icon">&nbsp;</span>返回</a>
        </p>
    </div>
</div>

<input type="hidden" id="current_tab_id" value="tab_li_first">
<form name="data_form" id="data_form">
<div id="detail_list"> </div>
<input id="administration_serial_number_hidden" name="applyForm.serialNumber" value="" type="hidden">
</form>

<script type="text/javascript">
    $(function(){
        var serial = createSerialNumber();
        $("#administration_serial_number").html(serial);
        $("#administration_serial_number_hidden").val(serial);
        var date = new Date();
        $("#d_date").html(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日");
    });
    //添加Detail
    function addDetail(){
        var detail_evectionDate = $("#detail_evectionDate").val();
        var detail_evectionReason = $("#detail_evectionReason").val();
        var detail_planeCost = $("#detail_planeCost").val();
        var detail_trafficCost = $("#detail_trafficCost").val();
        var detail_stayCost = $("#detail_stayCost").val();
        var detail_mealCost = $("#detail_mealCost").val();
        var detail_otherCost = $("#detail_otherCost").val();
        var detail_amount = $("#detail_amount").val();
        if(checkNull(detail_evectionDate)){
            alert("请填写日期");
            return;
        }
        if(checkNull(detail_evectionReason)){
            alert("请填写出差事由");
            return;
        }
        if(checkNull(detail_planeCost) || isNaN(detail_planeCost)){
            alert("请正确填写机/船票费");
            return;
        }
        if(checkNull(detail_trafficCost) || isNaN(detail_trafficCost)){
            alert("请正确填写交通费");
            return;
        }
        if(checkNull(detail_stayCost) || isNaN(detail_stayCost)){
            alert("请正确填写住宿费");
            return;
        }
        if(checkNull(detail_mealCost) || isNaN(detail_mealCost)){
            alert("请正确填写住膳食费");
            return;
        }
        if(checkNull(detail_otherCost) || isNaN(detail_otherCost)){
            alert("请正确填写其他费用");
            return;
        }

        var tab_id = $("#current_tab_id").val();
        var detail = $("#detail_"+tab_id);
        var isEdit = (detail != null && detail.length > 0);
        if(isEdit){
            //修改数据
            var detailInfo = $(detail).find("input[type='hidden']");
            $(detailInfo[0]).val(detail_evectionDate);
            $(detailInfo[1]).val(detail_evectionReason);
            $(detailInfo[2]).val(detail_planeCost);
            $(detailInfo[3]).val(detail_trafficCost);
            $(detailInfo[4]).val(detail_stayCost);
            $(detailInfo[5]).val(detail_mealCost);
            $(detailInfo[6]).val(detail_otherCost);
            $(detailInfo[7]).val(detail_amount);
        }else{
            //添加数据
            //var tab_id = $("#tab_title").find("li:last").attr("id");
            var temp = '<div id="detail_'+tab_id+'">';
            temp += '<input type="hidden" value="'+detail_evectionDate+'" name="detail_evectionDate_input">';
            temp += '<input type="hidden" value="'+detail_evectionReason+'" name="detail_evectionReason_input">';
            temp += '<input type="hidden" value="'+detail_planeCost+'" name="detail_planeCost_input">';
            temp += '<input type="hidden" value="'+detail_trafficCost+'" name="detail_trafficCost_input">';
            temp += '<input type="hidden" value="'+detail_stayCost+'" name="detail_stayCost_input">';
            temp += '<input type="hidden" value="'+detail_mealCost+'" name="detail_mealCost_input">';
            temp += '<input type="hidden" value="'+detail_otherCost+'" name="detail_otherCost_input">';
            temp += '<input type="hidden" value="'+detail_amount+'" name="detail_amount_input">';
            temp += "</div>"
            $("#detail_list").append(temp);

            //添加tab
            var obj = '' +
                    '<li style="width:150px" onclick="tab_onclick(this)" id="tab_li_'+(new Date().getTime())+'">'+
                        '<a href="#"><span style="background:url(${ctx}/images/img/table_add.png)" class="icon">&nbsp;</span><span class="tab_title_span">第'+($("#tab_title li").length+1)+'项</span></a>'+
                    '</li>'
            $("#tab_title").append(obj)
        }

        $("#detail_evectionDate").val("");
        $("#detail_evectionReason").val("");
        $("#detail_planeCost").val("");
        $("#detail_trafficCost").val("");
        $("#detail_stayCost").val("");
        $("#detail_mealCost").val("");
        $("#detail_otherCost").val("");
        $("#detail_amount").val("");
        tab_onclick($("#tab_title").find("li:last"))
        resetTotal();
    }

    //删除Detail
    function deleteDetail(){
        if(confirm("确定要删除该项数据吗？")){
            var tab_id = $("#current_tab_id").val();
            $("#detail_"+tab_id).remove();
            $("#"+tab_id).remove();

            $("#detail_evectionDate").val("");
            $("#detail_evectionReason").val("");
            $("#detail_planeCost").val("");
            $("#detail_trafficCost").val("");
            $("#detail_stayCost").val("");
            $("#detail_mealCost").val("");
            $("#detail_otherCost").val("");
            $("#detail_amount").val("");
            tab_onclick($("#tab_title").find("li:last"))
            resetTobIndex();
            resetTotal();
        }
    }

    //点击tab
    function tab_onclick(obj){
        $("#tab_title").find("a").removeClass("current");
        $(obj).find("a").addClass("current")

        var tab_id = $(obj).attr("id");
        $("#current_tab_id").val(tab_id);
        var detail = $("#detail_"+tab_id);
        if(detail != null && detail.length > 0){
            var detailInfo = $(detail).find("input[type='hidden']");
            $("#detail_evectionDate").val(detailInfo[0].value);
            $("#detail_evectionReason").val(detailInfo[1].value);
            $("#detail_planeCost").val(detailInfo[2].value);
            $("#detail_trafficCost").val(detailInfo[3].value);
            $("#detail_stayCost").val(detailInfo[4].value);
            $("#detail_mealCost").val(detailInfo[5].value);
            $("#detail_otherCost").val(detailInfo[6].value);
            $("#detail_amount").val(detailInfo[7].value);
            $("#modify_btn").show();
            $("#delete_btn").show();
            $("#add_detail_btn").hide();
        }else{
            $("#detail_evectionDate").val("");
            $("#detail_evectionReason").val("");
            $("#detail_planeCost").val("");
            $("#detail_trafficCost").val("");
            $("#detail_stayCost").val("");
            $("#detail_mealCost").val("");
            $("#detail_otherCost").val("");
            $("#detail_amount").val("");
            $("#modify_btn").hide();
            $("#delete_btn").hide();
            $("#add_detail_btn").show();
        }
    }

    //调整tab顺序
    function resetTobIndex(){
        var tabTitles = $("#tab_title").find(".tab_title_span");
        for(var index = 0; index < tabTitles.length; index++){
            $(tabTitles[index]).html("第"+(index+1)+"项");
        }
    }

    //设置总额
    function resetTotal(){
        var total = computeMoney();
        $("#total_money_input").val(total);
    }
    function computeMoney(){
        var total = 0;
        $("#detail_list").find("input[name='detail_amount_input']").each(function(){
            total += parseFloat(this.value)
        });
        return total;
    }

    //计算单项总和
    function computeTotal(){
        var detail_planeCost = $("#detail_planeCost").val();
        var detail_trafficCost = $("#detail_trafficCost").val();
        var detail_stayCost = $("#detail_stayCost").val();
        var detail_mealCost = $("#detail_mealCost").val();
        var detail_otherCost = $("#detail_otherCost").val();
        var total = ehrParseFloat(detail_planeCost) + ehrParseFloat(detail_trafficCost) + ehrParseFloat(detail_stayCost) + ehrParseFloat(detail_mealCost) + ehrParseFloat(detail_otherCost);
        $("#detail_amount").val(total);
    }
    function ehrParseFloat(value){
        if(checkNull(value) || isNaN(value)){
            return 0;
        }
        return parseFloat(value);
    }

    //提交表单
    function doAddDetails(){
        if($("#detail_list").children().length == 0){
            alert("没有数据，无法提交")
            return;
        }

        var data  = $("#data_form").serialize();
        var url = "${ctx}/${userType==1?"sign" : "public"}/administration-evection-cost-apply-form-save.xhtml";
        $.ajax(url, {
            type: "POST",
            //data: organization,
            data: data,
            dataType:"html",
            cache:false,
            success:function(a) {
                return pageDownloaded(a, url)
            },
            complete:function() {}
        });
    }
</script>